<template>
<div v-if="viewLoading">
  <van-actionsheet v-model="showActionsheet" :actions="actionsActionsheet" />

  <div class="van-cell-group van-hairline--top-bottom">
    <div class="van-cell van-cell--required van-hairline van-field" @click="showActionsheet = true">{{ currentActionsheet.name }}</div>

    <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('account')}">
      <div class="van-cell__title"><span>用户名</span></div>
      <div class="van-cell__value">
        <input v-model="formModel.account" v-validate="'required|min:6'" name="account" type="text" placeholder="请输入用户名" class="van-field__control" v-on:input="inputFindAccount">
        <div v-if="errors.has('account')" class="van-field__error-message">{{ errors.first('account') }}</div>
      </div>
    </div>
    
    <div class="van-cell van-field van-hairline" v-if="realName !== ''">
      <div class="van-cell__title"><span>真实姓名</span></div>
      <div class="van-cell__value"><input type="text" class="van-field__control" :value="realName" disabled="disabled"></div>
    </div>
  
    <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('amount')}">
      <div class="van-cell__title"><span>数量</span></div>
      <div class="van-cell__value">
        <input v-model="formModel.amount" v-validate="'required'" name="amount" type="text" placeholder="请输入数量" class="van-field__control">
        <div v-if="errors.has('amount')" class="van-field__error-message">{{ errors.first('amount') }}</div>
      </div>
    </div>
  
    <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('safePassword')}">
      <div class="van-cell__title"><span>安全密码</span></div>
      <div class="van-cell__value">
        <input v-model="formModel.safePassword" v-validate="'required|min:6'" name="safePassword" type="password" placeholder="请输入安全密码" class="van-field__control">
        <div v-if="errors.has('safePassword')" class="van-field__error-message">{{ errors.first('safePassword') }}</div>
      </div>
    </div>
  
    <van-button size="large" type="primary" @click="clickSubmit">转赠</van-button>
  </div>
</div>
</template>

<script>
import qs from 'qs';
import { Actionsheet, CellGroup, Field, Button, Toast } from 'vant';
import ajaxVant from '../../../../utils/ajaxVant';
import auth from '../../../../utils/auth';

export default {
  components: {
    [Actionsheet.name]: Actionsheet,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      actionsActionsheet: [{
        name: '交易票',
        field: 4,
        fieldName: 'price_trade',
        callback: this.selectActionsheet
      }, {
        name: '开户票',
        field: 5,
        fieldName: 'price_activation',
        callback: this.selectActionsheet
      }],
      currentActionsheet: {
        name: '请选择票'
      },
      showActionsheet: false,
      realName: '',
      formModel: {
        account: '',
        'to_user_id': 0,
        amount: '',
        safePassword: '',
        field: ''
      },
      userWallet: {},
      viewLoading: false
    };
  },
  methods: {
    inputFindAccount() {
      if (this.formModel.account.replace(/[\u0391-\uFFE5]/g, 'aa').length < 6) {
        this.realName = '';
        this.formModel['to_user_id'] = 0;
        return false;
      }

      var _this = this;
      if (this.formModel.account !== null && this.formModel.account !== undefined && this.formModel.account !== '') {
        ajaxVant.get('/user/account/' + _this.formModel.account).then(function(data) {
          if (data !== false) {
            _this.formModel['to_user_id'] = data.user['user_id'];
            _this.realName = data['user_info']['real_name'];
          }
        });
      }
    },
    selectActionsheet(action) {
      this.formModel.field = action.field;
      this.currentActionsheet.name = '转账' + action.name + ', 可用数量:' + this.userWallet[action.fieldName];
      this.showActionsheet = false;
    },
    clickSubmit() {
      var _this = this;
      _this.$validator.validateAll().then((result) => {
        if (result) {
          auth.getToken().then(function(token) {
            ajaxVant.post('/user/transfer?token=' + token, qs.stringify(_this.formModel)).then(function(data) {
              if (data !== false) {
                Toast(data.msg);

                setTimeout(() => {
                  Toast.clear();
                  window.location.reload();
                }, 1000);
              }
            });
          });
        }
      });
    },
    getUserWallet() {
      var _this = this;
      auth.getToken().then(function(token) {
        ajaxVant.get('/user/wallet?token=' + token).then(function(data) {
          if (data !== false) {
            _this.userWallet = data.user_wallet;
            _this.viewLoading = true;
          }
        });
      });
    }
  },
  mounted() {
    this.getUserWallet();
  }
};

</script>
